<template>
  <div class="address-select">
    <div class="address-select-box address-select-box-direct">
      <div class="con">
        <div
          class="search-address"
          v-show="!showAddress">
          <i class="fa fa-search iconfont-search"></i>
          <div class="search-input">
            <label
              for="search"
              class="input-label"></label>
            <input
              type="text"
              name="search"
              v-model="search"
              placeholder="输入街道、乡镇、小区或商圈名称"
              autocomplete="off"
              class="input-text"
              style="height: 44px; padding-left: 45px" />
            <!-- <i class="iconfont iconfont-circle-close clear"></i>
                  <p
                    class="msg msg-error"
                    style="display: none"></p>
                  <span
                    class="iconfont-circle-close icon-error"
                    style="display: none"></span> -->
          </div>
          <div class="search-example">例如：北京 华润五彩城</div>
          <div
            class="result-box"
            v-show="search">
            <div class="result-list">
              <ul>
                <li
                  v-for="address of addressStore.addressList"
                  :key="address.way_id">
                  <div class="item-into">
                    <div class="address-name">{{ address.way_name }}</div>
                    <div class="address-desc">
                      {{
                        `${address.province_name} ${address.city_name} ${address.county_name}`
                      }}
                    </div>
                  </div>
                  <a
                    class="btn"
                    @click="selectAddress(address)">
                    选择
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div
          class="address-box3"
          v-show="showAddress">
          <div class="address-selectd">
            <span :class="address.province ? 'mi' : 'gray'">
              {{ address.province ? address.province : '选择省份/自治区' }}
            </span>
            <span
              :class="address.city ? 'mi' : 'gray'"
              v-show="address.province">
              {{ address.city ? address.city : '选择城市/地区' }}
            </span>
            <span
              :class="address.county ? 'mi' : 'gray'"
              v-show="address.city">
              {{ address.county ? address.county : '选择区县' }}
            </span>
            <span
              :class="address.way ? 'mi' : 'gray'"
              v-show="address.county">
              {{ address.way ? address.way : ' 选择配送区域' }}
            </span>
          </div>
          <div
            class="address-list"
            v-show="!address.province">
            <span
              v-for="province in addressStore.provinceList"
              :key="province.province_id"
              @click="saveProvince(province)">
              {{ province.province_name }}
            </span>
          </div>
          <div
            class="address-list"
            v-show="address.province && !address.city">
            <span
              v-for="city in addressStore.cityList"
              :key="city.city_id"
              @click="saveCity(city)">
              {{ city.city_name }}
            </span>
          </div>
          <div
            class="address-list"
            v-show="address.city && !address.county">
            <span
              v-for="county in addressStore.countyList"
              :key="county.county_id"
              @click="saveCounty(county)">
              {{ county.county_name }}
            </span>
          </div>
          <div
            class="address-list"
            v-show="address.county && !address.way">
            <span
              v-for="way in addressStore.wayList"
              :key="way.way_id"
              @click="saveWay(way)">
              {{ way.way_name }}
            </span>
          </div>
        </div>
        <div class="oper-box">
          <span
            class="oper-text"
            v-show="!showAddress && addressStore.addressList?.length == 0"
            @click="searchProvinceList">
            手动选择地址 &gt;
          </span>
          <span
            class="oper-text"
            v-show="showAddress"
            @click="showAddress = false">
            搜索地址快速定位 &gt;
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import useStore from '@/store'
import * as addressModel from '@/model/addressModel'
const { addressStore } = useStore()
const props = defineProps({
  changeIsShow: Function
})
const showAddress = ref<boolean>(false)

const searchProvinceList = () => {
  addressStore.searchProvinceList()
  showAddress.value = true
}

const address = ref({
  province: '',
  city: '',
  county: '',
  way: ''
})

const saveProvince = (province: addressModel.province) => {
  addressStore.searchCityList(province.province_id)
  address.value.province = province.province_name
}
const saveCity = (city: addressModel.city) => {
  addressStore.searchCountyList(city.city_id)
  address.value.city = city.city_name
}
const saveCounty = (county: addressModel.county) => {
  addressStore.searchWayList(county.county_id)
  address.value.county = county.county_name
}
const saveWay = (way: addressModel.way) => {
  if (props.changeIsShow) props.changeIsShow(false)
  showAddress.value = false
  address.value.way = way.way_name
  addressStore.saveAddress({
    province: address.value.province,
    city: address.value.city,
    county: address.value.county,
    way: address.value.way
  })
  address.value.province = ''
  address.value.city = ''
  address.value.county = ''
  address.value.way = ''
}
const search = ref<string>()

watch(search, async (newValue, oldValue) => {
  if (newValue && newValue != '') {
    await addressStore.searchAddressList(newValue)
  } else {
    addressStore.addressList = []
  }
})

const selectAddress = (
  address: addressModel.address | addressModel.userAddress
) => {
  if (props.changeIsShow) props.changeIsShow(false)
  addressStore.saveAddress({
    province: address.province_name,
    city: address.city_name,
    county: address.county_name,
    way: address.way_name
  })
  search.value = ''
}
defineExpose({
  showAddress,
  selectAddress
})
</script>

<style lang="less" scoped>
.address-select {
  .address-select-box {
    position: static;
    border: none;
    padding-top: 0;
    .con {
      margin: 0 20px;
      .search-address {
        padding-top: 0;
        position: relative;
        .iconfont-search {
          position: absolute;
          font-size: 20px;
          line-height: 1;
          text-align: center;
          transform: translate3d(10px, 10px, 0);
          color: #b2b2b2;
          z-index: 2;
        }
        .search-input {
          height: 44px;
          position: relative;
          margin: 0;
          padding: 0;
          border: 0;
          text-align: left;
          .input-label {
            position: absolute;
            left: 12px;
            top: 11px;
            z-index: 2;
            padding: 0 3px;
            font-size: 14px;
            line-height: 18px;
            color: #b0b0b0;
            background: rgba(0, 0, 0, 0);
            cursor: text;
            transition: all 0.2s linear;
          }
          .input-text {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 16px;
            border: 1px solid #e0e0e0;
            font-size: 14px;
            line-height: 18px;
            background: #fff;
            outline: 0;
            transition: border-color 0.2s linear;
            &:focus {
              border: 1px solid #ff6900;
            }
          }
        }
        .search-example {
          display: none;
          padding: 10px 0;
          color: #b0b0b0;
        }
        .result-box {
          .result-list {
            background-color: #fff;
            height: 260px;
            overflow: auto;
            ul {
              margin: 0 0 -1px 0;
              padding: 0;
              li {
                padding: 10px 0;
                cursor: pointer;
                position: relative;
                border-bottom: 1px solid #f0f0f0;
                transition: all 0.3s;
                overflow: hidden;
                display: flex;
                &:hover > .btn {
                  right: 30px;
                }
                .item-into {
                  .address-name {
                    color: #333;
                    height: 21px;
                  }
                  .address-desc {
                    font-size: 12px;
                    color: #b0b0b0;
                    height: 18px;
                  }
                }
                .btn {
                  position: absolute;
                  top: 50%;
                  right: -110px;
                  width: 100px;
                  height: 32px;
                  line-height: 32px;
                  margin-top: -17px;
                  opacity: 1;
                  text-align: center;
                  transition: all 0.3s;
                  background: #ff6700;
                  border-color: #ff6700;
                  color: #fff;
                  &:hover {
                    background-color: #f25807;
                  }
                }
              }
            }
          }
        }
      }
      > .address-box3 {
        > .address-selectd {
          padding: 6px 0;
          border-bottom: 1px solid #e0e0e0;
          > span {
            line-height: 30px;
            margin-right: 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
          }
        }
        > .address-list {
          padding: 20px 0 14px;
          > span {
            display: inline-block;
            margin-right: 14px;
            line-height: 30px;
            margin-bottom: 6px;
            color: #333;
            cursor: pointer;
            &:hover {
              color: #ff6900;
            }
          }
        }
      }
      .oper-box {
        text-align: right;
        padding: 20px 0;
        border-top: 1px solid #e0e0e0;
        color: #b0b0b0;
        .oper-text {
          &:hover {
            color: #ff6900;
          }
        }
      }
    }
  }
  .address-select-box-direct {
    width: 100%;
    background: #fff;
  }
}
</style>
